// 题目数据
const data = [
    {
        id: 1,
        qs: 'HTML5中canvas元素的用途是什么？',
        as: '绘制图形',
        opts: ['绘制图形', '播放音频', '用于存储数据', '显示视频']
    },
    {
        id: 2,
        qs: 'CSS中，box-sizing属性的作用是什么？',
        as: '设置盒模型的计算方式',
        opts: [
            '设置边框大小',
            '设置盒模型的计算方式',
            '控制元素的高度和宽度',
            '控制元素的背景色'
        ]
    },
    {
        id: 3,
        qs: '在JavaScript中，let和var的主要区别是什么？',
        as: 'let具有块级作用域，var具有函数级作用域',
        opts: [
            'let具有块级作用域，var具有函数级作用域',
            'let是ES6的新特性，var是ES5的旧特性',
            'let可以重新声明，var不能重新声明',
            'let只能用于常量，var可以用于变量'
        ]
    },
    {
        id: 4,
        qs: '在JavaScript中，如何获取数组的长度？',
        as: 'array.length',
        opts: [
            'array.getLength()',
            'array.size()',
            'array.length',
            'array.length()'
        ]
    },
    {
        id: 5,
        qs: 'Vue.js中，哪个生命周期钩子在组件创建后首次被调用？',
        as: 'created',
        opts: ['created','mounted', 'beforeCreate', 'updated']
    }
];
let currentQuestionIndex = 0;
let score = 0;
let timer;
// 获取元素
const startScreen = document.getElementById('start-screen');
const instructionsScreen = document.getElementById('instructions-screen');
const questionScreen = document.getElementById('question-screen');
const resultScreen = document.getElementById('result-screen');
const startExamBtn = document.querySelector('.start-exam-btn');
const exitExamBtn = document.getElementById('exit-exam-btn');
const continueExamBtn = document.getElementById('continue-exam-btn');
const questionContainer = document.getElementById('question-container');
const nextQuestionBtn = document.getElementById('next-question-btn');
const timerElement = document.getElementById('timer');
const progressElement = document.getElementById('progress');
const scoreElement = document.getElementById('score');
const evaluationElement = document.getElementById('evaluation');
const retakeExamBtn = document.getElementById('retake-exam-btn');
const exitResultExamBtn = document.getElementById('exit-result-exam-btn');
// 获取时间线元素
const timeline = document.getElementById('timeline');

// 开始考试按钮点击事件
startExamBtn.addEventListener('click', () => {
    startScreen.style.display = 'none';
    instructionsScreen.style.display = 'block';
});
// 退出考试按钮点击事件
exitExamBtn.addEventListener('click', () => {
    instructionsScreen.style.display = 'none';
    startScreen.style.display = 'block';
    // 清除定时器
    clearInterval(timer);
    // 重置题目索引和分数
    currentQuestionIndex = 0;
    score = 0;
});
// 继续考试按钮点击事件
continueExamBtn.addEventListener('click', () => {
    instructionsScreen.style.display = 'none';
    questionScreen.style.display = 'block';
    showQuestion();
});
// 显示题目
function showQuestion() {
    const currentQuestion = data[currentQuestionIndex];
    questionContainer.innerHTML = `<h2>${currentQuestionIndex + 1}. ${currentQuestion.qs}</h2>`;
    currentQuestion.opts.forEach((option, index) => {
        const optionElement = document.createElement('div');
        optionElement.classList.add('option');
        optionElement.textContent = option;
        optionElement.addEventListener('click', () => selectOption(option, currentQuestion.as));
        questionContainer.appendChild(optionElement);
    });
    progressElement.textContent = `进度: ${currentQuestionIndex + 1} / ${data.length}`;
    startTimer();
    // 每次显示题目时隐藏下一题按钮
    nextQuestionBtn.style.display = 'none';
    // 重置时间线动画
    timeline.style.animation = 'none';
    timeline.offsetHeight; // 触发重绘
    timeline.style.animation = 'timeline 15s linear forwards';
}
// 开始计时
function startTimer() {
    clearInterval(timer); // 清除之前的定时器
    let timeLeft = 15;
    timerElement.textContent = timeLeft;
    const interval = 1000; // 每秒更新一次
    timer = setInterval(() => {
        timeLeft--;
        timerElement.textContent = timeLeft;
        if (timeLeft <= 0) {
            clearInterval(timer);
            handleTimeUp();
        }
    }, interval);
}
// 处理时间到
function handleTimeUp() {
    const currentQuestion = data[currentQuestionIndex];
    const options = questionContainer.querySelectorAll('.option');
    options.forEach((option) => {
        if (option.textContent === currentQuestion.as) {
            option.classList.add('correct');
        }
        option.removeEventListener('click', selectOption);
        option.style.pointerEvents = 'none';
    });
    // 时间到后显示下一题按钮
    nextQuestionBtn.style.display = 'block';
    // 停止时间线动画
    timeline.style.animationPlayState = 'paused';
}
// 选择选项
function selectOption(selectedOption, correctAnswer) {
    clearInterval(timer);
    const options = questionContainer.querySelectorAll('.option');
    options.forEach((option) => {
        option.removeEventListener('click', selectOption);
        option.style.pointerEvents = 'none';
        if (option.textContent === correctAnswer) {
            option.classList.add('correct');
        }
        if (option.textContent === selectedOption && option.textContent!== correctAnswer) {
            option.classList.add('incorrect');
        }
    });
    if (selectedOption === correctAnswer) {
        score++;
    }
    // 选择选项后显示下一题按钮
    nextQuestionBtn.style.display = 'block';
    // 停止时间线动画
    timeline.style.animationPlayState = 'paused';
}
// 下一题按钮点击事件
nextQuestionBtn.addEventListener('click', () => {
    currentQuestionIndex++;
    nextQuestionBtn.style.display = 'none';
    if (currentQuestionIndex < data.length) {
        showQuestion();
    } else {
        showResult();
    }
});
// 显示结果
function showResult() {
    questionScreen.style.display = 'none';
    resultScreen.style.display = 'block';
    // 修改得分显示格式
    scoreElement.textContent = `你得了${score}分，共${data.length}分。`;
    let evaluation;
    if (score === data.length) {
        evaluation = '恭喜！你全部答对了！';
    } else {
        evaluation = '还需努力哦！';
    }
    evaluationElement.textContent = evaluation;
}
// 重新考试按钮点击事件
retakeExamBtn.addEventListener('click', () => {
    resultScreen.style.display = 'none';
    currentQuestionIndex = 0;
    score = 0;
    questionScreen.style.display = 'block';
    showQuestion();
});
// 结果界面退出考试按钮点击事件
exitResultExamBtn.addEventListener('click', () => {
    resultScreen.style.display = 'none';
    startScreen.style.display = 'block';
    // 清除定时器
    clearInterval(timer);
    // 重置题目索引和分数
    currentQuestionIndex = 0;
    score = 0;
});    